<template>
  <div class="main-todo">
    <input
        type="text"
        class="add-todo"
        placeholder="(输入待办事项...)"
        autofocus
        v-model="content"
        @keyup.enter="addTodo"
    />
    <todo-item
        v-for="(item, index) in todoData"
        :key="index"
        :todo="item"
        @del="handleDeleteItem"
    ></todo-item>
  </div>
</template>

<script>
// import TodoInfo from "./parts/TodoInfo.vue";
import TodoItem from "./parts/TodoItem.vue";

export default {
  name: "MainTodo",
  data() {
    return {
      todoData: [
        {
          id: 1,
          content: "买菜",
          completed: false
        },{
          id: 0,
          content: "洗衣服",
          completed: false
        },
      ],
      n: 2, // 累计已记录n条待办事项（n值从0开始递增，只增不减）
      content: ''
    }
  },
  methods: {
    addTodo() {
      if (this.content === '') {
        return
      }
      this.todoData.unshift({
        id: this.n++,
        content: this.content,
        completed: false
      })
      console.log('[DEBUG] n:', this.n, ', content:', this.content)
      this.content = ''
    },
    handleDeleteItem(id) {
      this.todoData.splice(
          this.todoData.findIndex(item => item.id === id),
          1
      )
    }
  },
  components: {
    //TodoInfo,
    TodoItem
  }
}
</script>

<style lang="stylus" scoped>
  .main-todo
    margin 0 auto
    width 600px
    background-color white
    box-shadow 0 0 5px darkgrey
    .add-todo
      padding 16px 16px 16px 36px
      width 100%
      font-size 24px
      font-weight inherit
      font-family inherit
      color inherit
      border none
      outline none
      box-sizing border-box
</style>
